import { Component, OnInit } from '@angular/core';
import { NgxEchartsService } from 'ngx-echarts';
@Component({
  selector: 'three-child3',
  templateUrl: './three-child3.component.html',
  styleUrls: ['./three-child3.component.css']
})
export class ThreeChild3Component implements OnInit {
  chartOption;
  isLoading = true;
  constructor(private nes: NgxEchartsService) { }

  ngOnInit() {
    this.chartOption = {
      title: {
        text: '堆叠区域图'
      }
      ,
      tooltip: {
        trigger: 'axis'
      }
      ,
      legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
      }
      ,
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      }
      ,
      grid: {
        left: '3%', right: '4%', bottom: '3%', containLabel: true
      }
      ,
      xAxis: [{
        type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
      ],
      yAxis: [{
        type: 'value'
      }
      ],
      series: [{
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        areaStyle: {
          normal: {}
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        areaStyle: {
          normal: {}
        }
        ,
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '视频广告',
        type: 'line',
        stack: '总量',
        areaStyle: {
          normal: {}
        }
        ,
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '直接访问',
        type: 'line',
        stack: '总量',
        areaStyle: {
          normal: {}
        }
        ,
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '搜索引擎',
        type: 'line',
        stack: '总量',
        label: {
          normal: {
            show: true, position: 'top'
          }
        }
        ,
        areaStyle: {
          normal: {}
        }
        ,
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
      ]
    }
    setTimeout(() => this.isLoading = false, 2000);
  }

  onChartEvent(e, name) {
    // console.log(name, e)
  }
  ngAfterViewInit() {  // 实现多个图表联动
    const chartElement1 = document.getElementById('one');
    const chartElement2 = document.getElementById('two');
    const chart1 = this.nes.getInstanceByDom(chartElement1);
    const chart2 = this.nes.getInstanceByDom(chartElement2);
    this.nes.connect([chart1, chart2]);
  }
}
